﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>XK-Blog</title>

    <!-- /favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">

    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">

    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">

    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">

    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">

    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>

<!-- 头部菜单 开始 -->
<section class="rapid-mainmenu-area" th:fragment="blogMenu">
    <div class="container">
        <div class="row">
            <div class="col-md-12 ">
                <div class="col-md-9 col-sm-9 ">
                    <div class="row">
                        <!-- Responsive Menu -->
                        <div class="rapid-responsive-menu"></div>
                        <!-- Responsive Menu -->
                        <div class="mainmenu">
                            <nav>
                                <ul id="rapid_navigation">
                                    <!-- 外层菜单项：home -->
                                    <li th:classappend="${requestURI  == '/' ? 'current-page-item' : ''}">
                                        <a href="/">首页</a>
                                    </li>
                                    <!-- 外层菜单项：category -->
                                    <li th:classappend="${requestURI.contains('/category') ? 'current-page-item' : ''}">
                                        <a href="#">类别</a>
                                        <ul>
                                            <li th:each="category : ${categoryShowList}">
                                                <a th:text="${category.categoryName}"
                                                   th:href="'/category/'+${category.id}"></a>
                                            </li>
                                        </ul>
                                    </li>
                                    <!-- 外层菜单项：about -->
                                    <li th:classappend="${requestURI  == '/page' ? 'current-page-item' : ''}">
                                        <a href="/page">关于</a>
                                    </li>
                                    <!-- 外层菜单项：contact -->
                                    <li th:classappend="${requestURI  == '/contact' ? 'current-page-item' : ''}">
                                        <a href="/contact">联系我</a>
                                    </li>
                                    <!-- 外层菜单项：游客 -->
                                    <li th:classappend="${requestURI.contains('/visitor/visitor') ? 'current-page-item' : ''}">
                                        <a href="#">游客</a>
                                        <ul>
                                            <li>
                                                <a href="/visitor/visitorUploadAvatar" th:if="${getVisitor != null}">个人信息</a>
                                            </li>
                                            <li>
                                                <a href="/visitor/visitorLogin">登录</a>
                                            </li>
                                            <li>
                                                <a href="/visitor/visitorRegister">注册</a>
                                            </li>
                                            <li id="logoutLink" th:if="${getVisitor != null}">
                                                <a href="#">退出登录</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
<!--                <div class="col-md-3 col-sm-3" >-->
<!--                    <div class="menu-bar">-->
<!--                        <a href="#">-->
<!--                            <img style="border-radius: 50%;height: 42px;width: 42px;margin-top: 7px;"-->
<!--                                 th:src="${getVisitor != null} ? '/assets/img/' + ${getVisitor.visitorAvatar} : '/assets/img/noLoginAvatar.jpeg'"-->
<!--                                 alt="about image"/>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>
    </div>
</section>
<!-- 头部菜单 结束 -->


<!-- jQuery -->
<script src="/assets1/js/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="/assets1/js/bootstrap.min.js"></script>

<!-- Magnific Popup JS -->
<script src="/assets1/js/jquery.magnific-popup.min.js"></script>

<!-- OwlCarousel JS -->
<script src="/assets1/js/owl.carousel.min.js"></script>

<!-- SlickNav JS -->
<script src="/assets1/js/jquery.slicknav.min.js"></script>

<!-- Custom JS -->
<script src="/assets1/js/custom.js"></script>

<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });


    $(document).ready(function () {
        // 监听点击事件，手动打开模态框
        $('#openAvatarModal').on('click', function (e) {
            e.preventDefault();
            $('#uploadAvatarModal').modal('show');  // 触发模态框显示
        });
    });


    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {}; // 用于存储打开的窗口

    $('.external-link').on('click', function (e) {
        e.preventDefault();

        const url = $(this).attr('href'); // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });

    <!--切换分页时保存滚轮位置-->
    function keepScrollPos(url) {
        //存储滚动位置
        const scrollPos = $(window).scrollTop();
        localStorage.setItem('scrollPos', scrollPos);

        // 重定向到点击的页面
        window.location.href = url;
        return false;
    }

    <!--加载页面时，获取滚轮位置-->
    $(document).ready(function () {
        //检索滚动位置
        const scrollPos = localStorage.getItem('scrollPos');
        if (scrollPos) {
            $(window).scrollTop(scrollPos);
            localStorage.removeItem('scrollPos');
        }

        //退出登录
        $('#logoutLink').on('click', function (e) {
            e.preventDefault();

            // 发送请求到服务器执行退出登录操作
            $.ajax({
                type: 'POST',
                url: '/visitor/loginOut',
                success: function () {
                    // 如果退出成功，那么重载页面
                    location.reload();
                },
                error: function (error) {
                    console.error("Error: ", error);
                }
            });

        });
    });


</script>
</body>

</html>
